<template>
  <view class="ai-video-box">
    <m-video
      :ref="storyId"
      :storyId="storyId"
      :autoplay="autoplay"
      :canClick="!isGameingFlag"
      :controls="controls"
      :enableProgressGesture="!isGameingFlag"
      :enablePlayGesture="!isGameingFlag"
      :storyUrl="storyUrl"
      :coverImgUrl="coverImgUrl"
      :selfLoop="selfLoop"
      :inHome="inHome"
      :loopSec="loopSec"
      :isMultiVideo="isMultiVideo"
      :sectionsConfig="sectionsConfig"
      @startGame="startGame"
      :checkoutEvent="checkoutEvent"
      :showProgress="false"
      @handleLongPress="handleLongPress"
      @handleTouchEnd="handleTouchEnd"
      @controlstoggle="controlstoggle"
      @onEnded="onEnded"
      @onTimeUpdate="onTimeUpdate"
      @onPlay="onPlay"
      :width="width"
      :height="height"
      :goNextStoryFlag="goNextStoryFlag"
    >
      <template v-slot:videoCover>
        <view class="record-box" style="display: none" v-show="isShowRecord">
          <!-- #ifdef MP-WEIXIN -->
          {{ weixinRecord }}
          <!-- #endif -->
          <!-- #ifdef MP-TOUTIAO -->
          {{ douyinRecord }}
          <!-- #endif -->
        </view>

        <view v-if="isShowTip" class="tip"> 倍速播放中 </view>

        <view
          class="actions-box"
          v-if="!goNextStoryFlag"
          :style="
            buttonTextNum > 2
              ? 'flex-direction:column;justify-content:flex-end;'
              : ''
          "
        >
          <template v-for="(action, index) in actions">
            <view
              :style="{
                position: ['button-text'].includes(action.type)
                  ? 'relative'
                  : 'absolute',

                display: ['button-text'].includes(action.type) ? 'flex' : '',
                'justify-content': ['button-text'].includes(action.type)
                  ? 'center'
                  : '',
                height:
                  ['button-text'].includes(action.type) && buttonTextNum > 2
                    ? '120rpx'
                    : '100%',
                'align-items':
                  ['button-text'].includes(action.type) && buttonTextNum > 2
                    ? 'flex-start'
                    : '',
                flex:
                  ['button-text'].includes(action.type) && buttonTextNum <= 2
                    ? '1'
                    : '',
                width: ['button-text'].includes(action.type) ? '' : '100%',
              }"
              v-if="
                currentTime >= action.startTimeSec &&
                (currentTime <= action.endTimeSec || action.endTimeSec < 0) &&
                !action.hide
              "
            >
              <u-button
                v-if="action.type === 'button-text'"
                @click.stop="selsetAction(action, index)"
                id="single"
                :open-type="action.event === 'share-friend' ? 'share' : ''"
                :customStyle="acCustomStyle"
                :style="{
                  position:
                    ['button-text'].includes(action.type) && buttonTextNum > 2
                      ? 'static'
                      : 'absolute',
                  width: '100%',
                  opacity: action.gameOpacity,
                }"
                class="button-text game-position"
                type="primary"
                >{{ action.name }}</u-button
              >

              <view
                v-else-if="action.type === 'button-image' && !action.hide"
                class="button-image"
              >
                <view
                  class="button-image-content"
                  :style="action.style"
                  @click.stop="selsetAction(action, index)"
                >
                  <view
                    v-if="action.locked"
                    class="action-item-locked"
                    :style="{ opacity: action.gameOpacity }"
                  >
                    <image
                      style="width: 24rpx; height: 32rpx"
                      src="@/static/img/locked.svg"
                      mode="aspectFill"
                    >
                    </image>
                  </view>
                </view>
              </view>

              <!-- 							<breathPoint v-else-if="action.type === 'breathPoint'"
								@getGameResult="getGameResult(action, $event, index)" :paramsJson="action.paramsJson"
								:eventData="{ status_value: action.status_value }"></breathPoint> -->
              <!-- 
							<diyButton v-else-if="action.type === 'diyBtn'" :opacity="action.gameOpacity"
								:paramsJson="action.paramsJson" @getGameResult="getGameResult(action, $event, index)">
							</diyButton> -->

              <!-- 						<quicklyClickHit v-else-if="action.type === 'quicklyClickHit'" ref="quicklyClickHit"
								@stopClikVoice="stopClikVoice" :paramsJson="action.paramsJson"
								@changeSvgaStyle="changeSvgaStyle" @playSvga="playSvga"
								@getGameResult="getGameResult(action, $event, index)">
							</quicklyClickHit> -->
              <!-- 	<hateSvgaScore v-else-if="action.type === 'hateSvgaScore'" ref="hateSvgaScore"
								:paramsJson="action.paramsJson" @changeSvgaStyle="changeSvgaStyle" @playSvga="playSvga">
							</hateSvgaScore> -->
              <mPk
                v-else-if="action.type === 'mPk'"
                ref="mPk"
                :paramsJson="action.paramsJson"
                :storyId="storyId"
                :preStoryId="preStoryId"
                :nextStoryId="nextStoryId"
                @changeSvgaStyle="changeSvgaStyle"
                @playCardGift="playSvga"
                @openGiftPop="openGiftPop"
                @clearSvga="clearSvga"
                @pauseVideo="handleComponentPauseVideo"
                @restartStory="restartStory"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mPk>

              <mDaily
                ref="mDaily"
                v-else-if="action.type === 'mDaily'"
                :storyId="storyId"
                :gameId="gameId"
                :paramsJson="action.paramsJson"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mDaily>

              <mLuckDraw
                ref="mLuckDraw"
                v-else-if="action.type === 'mLuckDraw'"
                :storyId="storyId"
                :paramsJson="action.paramsJson"
                @getGameResult="getGameResult(action, $event, index)"
                @hideBackBtn="handleHideBackBtn"
                @showBackBtn="handleShowBackBtn"
              >
              </mLuckDraw>
              <!-- 
							<mGirlsRoomList ref="mGirlsRoomList" v-else-if="action.type === 'mGirlsRoomList'"
								:storyId="storyId" :paramsJson="action.paramsJson"
								@getGameResult="getGameResult(action, $event, index)">
							</mGirlsRoomList> -->

              <mRoom
                ref="mRoom"
                v-else-if="action.type === 'mRoom'"
                :storyId="storyId"
                :nextStoryId="nextStoryId"
                :paramsJson="action.paramsJson"
                @getGameResult="getGameResult(action, $event, index)"
                @hideBackBtn="handleHideBackBtn"
                @showBackBtn="handleShowBackBtn"
                @pauseVideo="pauseVideo"
                @playVideo="playVideo"
              >
              </mRoom>

              <!-- 							<mInfiniteLevels ref="mInfiniteLevels" v-else-if="action.type === 'mInfiniteLevels'"
								:storyId="storyId" :paramsJson="action.paramsJson"
								@getGameResult="getGameResult(action, $event, index)">
							</mInfiniteLevels> -->

              <mCompany
                ref="mCompany"
                v-else-if="action.type === 'mCompany'"
                :storyId="storyId"
                :paramsJson="action.paramsJson"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mCompany>
              <!-- 				<mLive ref="mLive" v-else-if="action.type === 'mLive'" :storyId="storyId"
								:paramsJson="action.paramsJson" @getGameResult="getGameResult(action, $event, index)">
							</mLive> -->

              <mPhone
                ref="mPhone"
                v-else-if="action.type === 'mPhone'"
                :storyId="storyId"
                :coverImgUrl="coverImgUrl"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mPhone>
              <girlMainPage
                ref="girlMainPage"
                v-else-if="action.type === 'girlMainPage'"
                :storyId="storyId"
                :coverImgUrl="coverImgUrl"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </girlMainPage>
              <mMiniGame
                ref="mMiniGame"
                v-else-if="action.type === 'mMiniGame'"
                :storyId="storyId"
                :coverImgUrl="coverImgUrl"
                :paramsJson="action.paramsJson"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mMiniGame>
              <mAgentChat
                ref="mAgentChat"
                v-else-if="action.type === 'mAgentChat'"
                :storyId="storyId"
                :coverImgUrl="coverImgUrl"
                :paramsJson="action.paramsJson"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mAgentChat>

              <mFunGame
                ref="mFunGame"
                v-else-if="action.type === 'mFunGame'"
                :storyId="storyId"
                :coverImgUrl="coverImgUrl"
                :paramsJson="action.paramsJson"
                :preStoryId="preStoryId"
                :duration="duration"
                :currentTime="currentTime"
                @getGameResult="getGameResult(action, $event, index)"
                @pauseVideo="pauseVideo"
                @playVideo="playVideo"
                @stopVideo="stopVideo"
                @hideBackBtn="handleHideBackBtn"
                @showBackBtn="handleShowBackBtn"
              >
              </mFunGame>
              <mHomePage
                ref="mHomePage"
                v-else-if="action.type === 'mHomePage'"
                :storyId="storyId"
                :coverImgUrl="coverImgUrl"
                :paramsJson="action.paramsJson"
                :preStoryId="preStoryId"
                :duration="duration"
                :currentTime="currentTime"
                :gameId="gameId"
                @getGameResult="getGameResult(action, $event, index)"
                @pauseVideo="pauseVideo"
                @playVideo="playVideo"
                @stopVideo="stopVideo"
                @hideBackBtn="handleHideBackBtn"
                @showBackBtn="handleShowBackBtn"
              >
              </mHomePage>

              <!-- 							<mChooseRoleClothes ref="mChooseRoleClothes" :paramsJson="action.paramsJson"
								v-else-if="action.type === 'mChooseRoleClothes'" :storyId="storyId"
								@getGameResult="getGameResult(action, $event, index)"></mChooseRoleClothes> -->

              <!-- 		<mGirlsDevelop ref="mGirlsDevelop" :paramsJson="action.paramsJson"
								v-else-if="action.type === 'mGirlsDevelop'" :storyId="storyId"
								@getGameResult="getGameResult(action, $event, index)">
							</mGirlsDevelop> -->

              <mGirlBaseWaitChange
                ref="mGirlBaseWaitChange"
                :paramsJson="action.paramsJson"
                v-else-if="action.type === 'mGirlBaseWaitChange'"
                :storyId="storyId"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mGirlBaseWaitChange>

              <mBack
                ref="mBack"
                :paramsJson="action.paramsJson"
                :name="action.name"
                v-else-if="action.type === 'mBack' && !hideBackBtn"
                @getGameResult="getGameResult(action, $event, index)"
              >
              </mBack>
              <!-- 				<mVs ref="mVs" :paramsJson="action.paramsJson" :name="action.name" :storyId="storyId"
								v-else-if="action.type === 'mVs'" @getGameResult="getGameResult(action, $event, index)">
							</mVs> -->

              <!-- 			<svgaEffectShow v-else-if="action.type === 'svgaEffectShow'" ref="svgaEffectShow"
								:paramsJson="action.paramsJson" @getGameResult="getGameResult(action, $event, index)">
							</svgaEffectShow> -->
              <!-- 
							<m-tip v-else-if="action.type === 'button-tip'" class="game-position"
								style="pointer-events: none" :buttonTopGuideImg="action.buttonTopGuideImg"
								:buttonTopGuideStyle="action.style" :buttonName="action.name">
							</m-tip> -->
              <!-- 							<mTipBg v-else-if="action.type === 'button-tip-bg'" class="game-position"
								style="pointer-events: none" :buttonTopGuideImg="action.buttonTopGuideImg"
								:buttonTopGuideStyle="action.style" :buttonName="action.name">
							</mTipBg> -->
              <!-- 		<emptyCoverBtn v-else-if="action.type === 'emptyCoverBtn'" style="position: absolute;"
								@getGameResult="getGameResult(action, $event, index)"></emptyCoverBtn> -->

              <!-- 	<slideGame v-else-if="currentInit && action.type === 'slide-game'" class="slideGame-box"
								ref="slideGame" @getGameResult="getGameResult(action, $event, index)">
							</slideGame> -->

              <!-- 			<chatBox v-else-if="action.type === 'chatBox'" :paramsJson="action.paramsJson"
								@getGameResult="getGameResult(action, $event, index)"></chatBox> -->

              <!-- 					<qteLineDown ref="lineDown" v-else-if="
                  currentInit && !action.locked && action.type === 'lineDown'
                " class="qte-box" :QTESec="action.QTESec" style="position: absolute; bottom: 160rpx"
								@qteEnd="selsetAction(action, index)">
							</qteLineDown> -->

              <!-- 							<oneSidelineDown ref="oneSideLineDown" v-else-if="
                  currentInit &&
                  !action.locked &&
                  action.type === 'oneSideLineDown'
                " class="qte-box" :QTESec="action.QTESec" @qteEnd="selsetAction(action, index)"
								:paramsJson="action.paramsJson">
							</oneSidelineDown> -->

              <!-- 							<qteLineDown ref="hideLineDown" v-else-if="
                  currentInit &&
                  !action.locked &&
                  action.type === 'hideLineDown'
                " :style="{ opacity: 0 }" class="qte-box" style="position: absolute; bottom: 160rpx"
								:QTESec="action.QTESec" @qteEnd="selsetAction(action, index)">
							</qteLineDown> -->

              <!-- 						<angryClickGame ref="angryClickGame" v-else-if="
                  currentInit &&
                  !action.locked &&
                  action.type === 'angryClickGame'
                " class="angryClickGame-box" :gameOpacity="action.gameOpacity" :QTESec="action.QTESec"
								:topNum="action.topNum" :btnName="action.name"
								@angryClickGameEnd="getGameResult(action, $event, index)">
							</angryClickGame> -->

              <!-- 						<threadGet ref="threadGet" v-else-if="currentInit && action.type === 'threadGetGame'"
								class="threadGet-box" :style="{ opacity: action.gameOpacity }" :autoPlay="true"
								:autoImgUrl="action.autoImgUrl">
							</threadGet> -->

              <!-- 			<scoreGame ref="scoreGame" v-else-if="currentInit && action.type === 'scoreGame'"
								class="scoreGame-box" :autoPlay="true" :autoNum="action.autoNum">
							</scoreGame> -->
              <!-- 							<openDoor ref="openDoor" v-else-if="currentInit && action.type === 'openDoor'"
								:paramsJson="action.paramsJson" @getGameResult="getGameResult(action, $event, index)">
							</openDoor> -->

              <!-- 							<mGoodsModal ref="mGoodsModal" v-else-if="currentInit && action.type === 'modalGame'"
								class="mGoodsModal-box" :autoPlay="true" :modalTitle="action.modalTitle"
								:goodsImage="action.goodsImage" :goodsDetailType="action.goodsDetailType"
								:goodsName="action.goodsName" :goodsIntro="action.goodsIntro"
								:goodsVideoSrc="action.goodsVideoSrc" :goodsBtnType="action.goodsBtnType">
							</mGoodsModal> -->
            </view>
          </template>
        </view>
        <!-- showSkipBtn&& -->
        <view
          v-if="
            globalGameCtx.nextChapterName &&
            !inHome &&
            gameId === 'e7370194a3d3a7baa0013dc707667726' &&
            !curStoryId.includes('start')
          "
          class="returnStory"
          @click.stop="skipSectionStory"
        >
          <view class="button-box">
            <image
              src="@/static/img/jump-icon.svg"
              mode=""
              class="top-img"
            ></image>
            <view class="bottom-text">跳过</view>
          </view>
        </view>
        <!-- 				<view v-if="!inHome&&gameId==='e7370194a3d3a7baa0013dc707667726'" class="returnStory goHome"
					@click.stop="goHome">
					<view class="button-box">
						<image src="@/static/img/leave.svg" mode="" class="top-img"></image>
						<view class="bottom-text">离店</view>
					</view>
				</view> -->
        <!-- 
				<view v-if="showReturnStory&&curStoryType!='agentChat'" class="returnStory" @click.stop="returnStory">
					<view class="button-box">
						<image src="@/static/img/return-icon.svg" mode="" class="top-img"></image>
						<view class="bottom-text">重新选择</view>
					</view>
				</view> -->
        <view v-if="isShowControl" class="player-btn-box">
          <image
            class="player-btn"
            @click.stop="playstoggle"
            src="@/static/img/play-btn.png"
          ></image>
        </view>

        <!-- <view class="bottom-shadow"></view> -->
      </template>
    </m-video>
  </view>
</template>

<script>
import { isNumber } from "util";
import mVideo from "@/components/m-video/index.vue";
// import qteLineDown from "@/components/qte-line-down/index.vue";
// import angryClickGame from "@/components/games/angry-click-game/index.vue";
// import mTip from "@/components/m-tip/index.vue";
// import mTipBg from "@/components/m-tip-bg/index.vue";
// import threadGet from "@/components/thread-get/index.vue";
// import scoreGame from "@/components/ai-score/index.vue";
// import mGoodsModal from "@/components/m-goods-modal/index.vue";
// import slideGame from "@/components/games/slide-game/index.vue";
// import oneSidelineDown from "@/components/oneSidelineDown/index.vue";
// import openDoor from "@/components/open-door/index.vue";
// import diyButton from "@/components/diyButton/index.vue";
// import quicklyClickHit from "@/components/quickly-click-hit/index.vue";
// import emptyCoverBtn from "@/components/empty-cover-btn/index.vue";
// import breathPoint from "@/components/breath-point/index.vue";
// import chatBox from "@/components/chat-box/index.vue";
// import hateSvgaScore from "@/components/hate-svga-score/index.vue"
// import svgaEffectShow from "@/components/svga-effect-show/index.vue"
import mPk from "@/components/m-pk/index.vue";
import mDaily from "@/components/m-daily/index.vue";
// import mChooseRoleClothes from "@/components/m-choose-role-clothes/index.vue"
// import mGirlsDevelop from "@/components/m-girl-develop/index.vue"
import mGirlBaseWaitChange from "@/components/m-girl-base-wait-change/index.vue";
import mBack from "@/components/m-back/index.vue";
// import mVs from "@/components/m-vs/index.vue"
import mLuckDraw from "@/components/m-luck-draw/index.vue";
// import mGirlsRoomList from "@/components/m-girls-room-list/index.vue"
import mRoom from "@/components/m-room/index.vue";
// import mInfiniteLevels from "@/components/m-infinite-levels/index.vue"
import mCompany from "@/components/m-company/index.vue";
// import mLive from "@/components/m-live/index.vue"
import mPhone from "@/components/m-phone/index.vue";
import girlMainPage from "@/components/girl-mian-page/index.vue";
import mMiniGame from "@/components/m-mini-game/index.vue";
import mAgentChat from "@/components/m-agent-chat/index.vue";
import mFunGame from "@/components/m-fun-game/index.vue";
import mHomePage from "@/components/m-home-page/index.vue";

import { throttle } from "@/utils/tools.js";

import { mapGetters, mapMutations, mapState } from "vuex";
import storage from "../../utils/storage";

export default {
  components: {
    mVideo,
    // qteLineDown,
    // slideGame,
    // mTip,
    // threadGet,
    // angryClickGame,
    // scoreGame,
    // mGoodsModal,
    // oneSidelineDown,
    // openDoor,
    // diyButton,
    // quicklyClickHit,
    // emptyCoverBtn,
    // breathPoint,
    // chatBox,
    // mTipBg,
    // hateSvgaScore,
    // svgaEffectShow,
    mPk,
    mDaily,
    // mChooseRoleClothes,
    // mGirlsDevelop,
    mGirlBaseWaitChange,
    mBack,
    // mVs,
    mLuckDraw,
    // mGirlsRoomList,
    mRoom,
    // mInfiniteLevels,
    mCompany,
    // mLive,
    mPhone,
    girlMainPage,
    mMiniGame,
    mAgentChat,
    mFunGame,
    mHomePage,
  },
  props: {
    width: {
      type: String,
      default: "100vw",
    },
    height: {
      type: String,
      default: "100vh",
    },
    controls: {
      type: Boolean,
      default: false,
    },
    failText: {
      type: String,
      default: "",
    },
    storyUrl: {
      type: String,
    },
    coverImgUrl: {
      type: String,
    },
    inHome: {
      type: Boolean,
      default: false,
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
    currentInit: {
      type: Boolean,
      default: false,
    },
    checkoutEvent: {
      type: [String],
    },
    storyId: {
      type: [Number, String],
    },
    gameId: {
      type: [Number, String],
    },
    storySet: {
      type: [Number, String],
    },
    // 范围循环
    isMultiVideo: {
      type: Boolean,
      default: false,
    },
    sectionsConfig: {
      type: Array,
      default: [],
    },
    // 倒数循环
    selfLoop: {
      type: Boolean,
      default: false,
    },
    loopSec: {
      type: Number,
      default: 0,
    },
    showRecord: {
      type: Boolean,
      default: false,
    },
    // 重新选择（上一剧情第几秒）
    seekTime: {
      type: Number,
      default: 0,
    },
    openQTE: {
      type: Boolean,
      default: false,
    },
    QTEtype: {
      type: String,
      default: "lineDown",
    },
    QTESec: {
      type: [Number, String],
      default: 10,
    },
    actions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      duration: 0,
      hideBackBtn: false,
      isLongPress: false,
      showThread: true,
      showTree: true,
      addTimeOutId: null,
      isAddTread: false,
      acCustomStyle: {
        color: "#ffffff",
        height: "80rpx",
        "font-size": "32rpx",
        "font-weight": "bold",
        "border-radius": "16rpx",
        background: "rgba(0,0,0,0.2)",
        margin: "0 52rpx",
      },

      isShowControl: false,
      isShowTip: false,
      currentTime: 0,
      goNextStoryFlag: false,
      isShowRecord: false,
      weixinRecord: storage.getGameDetail().weixinRecord,
      douyinRecord: storage.getGameDetail().douyinRecord,
      threadFlag: storage.getGameDetail().threadFlag,
      treeFlag: storage.getGameDetail().treeFlag,
      showSkipBtn: storage.getGameDetail().showSkipBtn,
    };
  },
  watch: {
    curStoryId: {
      handler(newVal, oldVal) {
        this.hideBackBtn = false; //每次切换剧情，就让返回按钮重新显示
      },
      deep: true,
      immediate: true,
    },
    curGlobalStoryId: {
      deep: true,
      immediate: true,
      handler(newV, oldV) {
        if (newV && newV != oldV && this.showRecord) {
          this.isShowRecord = true;
          setTimeout(() => {
            this.isShowRecord = false;
          }, 5000);
        }
      },
    },
    isGameingFlag: {
      deep: true,
      immediate: true,
      handler(v) {
        if (v) {
          this.isShowControl = false;
        }
      },
    },
    addThreadFlage: {
      handler(newValue, oldValue) {
        if (newValue === true && newValue != oldValue) {
          this.addTimeOutId = setTimeout(() => {
            this.changeAddThreadFlage(false);
          }, 600);
        }
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["globalGameCtx", "curGlobalStoryId"]),
    ...mapState(["addThreadFlage", "curStoryId", "curStoryType"]),
    preStoryId() {
      return this.globalGameCtx.preStoryId;
    },
    nextStoryId() {
      return this.globalGameCtx.nextStoryId;
    },
    showReturnStory() {
      return this.preStoryId;
    },
    isGameingFlag() {
      let isGameing = false;
      this.actions.forEach((item) => {
        let flag1 = this.currentTime >= item.startTimeSec;
        let flag2 = this.currentTime <= item.endTimeSec || item.endTimeSec < 0;
        let flag3 = item.canControlVideo;
        if (flag1 && flag2 && !flag3) {
          // 有玩法激活中
          isGameing = true;
        }
      });
      return isGameing;
    },
    buttonTextNum() {
      if (this.actions) {
        let targets = this.actions.filter((item) => {
          return item.type === "button-text";
        });
        return targets.length;
      } else {
        return 0;
      }
    },
  },

  created() {},

  mounted() {
    // console.log("所有按钮", this.actions);
  },
  methods: {
    ...mapMutations(["changeAddThreadFlage"]),
    handleHideBackBtn() {
      this.hideBackBtn = true;
    },
    handleShowBackBtn() {
      this.hideBackBtn = false;
    },
    handleComponentPauseVideo() {
      this.pauseVideo();
    },
    clearSvga() {
      this.$emit("clearSvga");
    },
    giftAddScore(num) {
      if (this.curStoryId == this.storyId && this.$refs.mPk) {
        this.$refs.mPk[0].giftAddScore(num);
      }
    },
    openGiftPop() {
      this.$emit("openGiftPop");
    },
    changeSvgaStyle(e) {
      if (this.curStoryId == this.storyId) {
        console.log("触发初始化svgabb", this.storyId);
        this.$emit("changeSvgaStyle", e);
      }
    },
    playSvga(e) {
      if (this.curStoryId == this.storyId) {
        this.$emit("playSvga", e);
      }
    },
    startGame() {
      this.$emit("startGame");
    },
    onPlay(e) {
      this.$emit("onPlay", e);
      // console.log("当前组件是", this.storyId);
      // #ifdef MP-TOUTIAO
      // console.log("聊天组件监听到play", this.curStoryId, this.storyId)
      if (this.curStoryId && this.curStoryId != this.storyId) {
        console.log(
          `aiVideo当前播放剧情【${this.curStoryId}】，当前要暂停的剧情【${this.storyId}】 AiVideo类型:${this.curStoryType}----------`
        );
        this.pauseVideo();
      }
      // #endif
    },
    stopClikVoice() {
      console.log("停止音频");
      this.$emit("stopClickVoice");
    },
    playClickVoice(e) {
      console.log("播音频");
      this.$emit("playClickVoice", e);
    },
    letTreeShow() {
      this.showTree = true;
    },
    letThreadShow() {
      this.showThread = true;
    },
    // 隐藏故事线
    hideTree() {
      this.showTree = false;
    },
    // 隐藏线索
    hideThread() {
      this.showThread = false;
    },
    openPayDefaultPop() {
      this.$refs.payDefaultPop.open();
    },
    // 由于抖音端接收不到emit事件，暂时废弃掉这个方案，采用vuex来更新动画状态
    endCollectThread(data) {
      // console.log("接收到事件", data);
      this.isAddTread = true;
      setTimeout(() => {
        this.isAddTread = false;
      }, 1200);
    },
    handleActionClick() {
      console.log("按钮被点击");
    },
    onTimeUpdate(e) {
      this.isShowControl = false;
      try {
        let duration = e.detail.duration;
        this.duration = e.detail.duration;
        let currentTime = e.detail.currentTime;
        this.currentTime = currentTime;

        this.$emit("onTimeUpdate", e);
        if (this.curStoryId == this.storyId) {
          if (this.$refs.mPk) {
            this.$refs.mPk[0].handleTimeUpdate(e);
          }
        }
      } catch (b) {
        console.log(
          "发生报错了————————————————————————————————————————————",
          JSON.stringify(e)
        );
      }
    },
    getGameResult(action, resultNum, index) {
      let resultAction = action;
      resultAction.resultNum = resultNum;
      console.log(resultAction, "resultAction-----");
      this.selsetAction(resultAction, index);
    },
    playstoggle() {
      this.$refs[this.storyId].controlstoggle();
    },
    stopStory(callback, destory = false) {
      this.stopVideo((flag) => {
        callback(flag);
      }, destory);
    },
    stopVideo(callback, destory = false) {
      console.log("停止");
      this.$refs[this.storyId].stopVideo((flag) => {
        callback(flag);
      }, destory);
    },
    async playVideo() {
      await this.$refs[this.storyId].playVideo();
    },
    async pauseVideo() {
      await this.$refs[this.storyId].pauseVideo();
    },

    // 此项是否可播放
    canChangeCurrent(callback) {
      callback(this.$refs[this.storyId].canPlay);
    },
    // 检测新项是否可跳转，跳转新项，暂停旧项
    goNextStoryAndStopCur() {
      this.$emit("playTargetStory", [
        this.nextStoryId,
        (flag) => {
          if (flag) {
            this.resetState();
            console.log("刷新位置3");
          }
        },
      ]);
    },
    restartStory(callback) {
      this.startPlay((flag) => {
        if (flag) {
          this.resetState();
          callback(true);
        }
      }, 0);
    },
    startPlay(callback, seekTime = 0) {
      this.$refs[this.storyId].rePlayVideo((flag) => {
        // this.resetState();
        callback(flag);
      }, seekTime);
    },
    onEnded() {
      if (this.$refs.mFunGame) {
        this.$refs.mFunGame[0].handleGameTimeOver();
      }
      // 判断数据中是否存在failText数据，存在则呼出失败页面
      if (this.failText) {
        console.log("到失败", this.globalGameCtx);
        this.$emit("gameFail", {
          preStoryId: this.preStoryId,
          storyId: this.storyId,
          failText: this.failText,
          seekTime: this.seekTime,
        });
      }
      if (!this.isGameingFlag) {
        // 非玩法状态，则走自动跳转逻辑
        this.goNextStoryAndStopCur();
      }

      // 播放结束，强控组件结束并跳转
      this.$emit("onEnded");
    },

    // 长按快进
    handleLongPress() {
      this.isLongPress = true;
      if (!this.isGameingFlag) {
        // 非玩法状态可快进
        this.$refs[this.storyId].playbackRate(2);
        uni.vibrateShort();
        this.isShowTip = true;
      }
    },

    // 结束快进
    handleTouchEnd(e) {
      if (this.isLongPress) {
        // 处理长按逻辑
        this.$refs[this.storyId].playbackRate(1);
      } else {
        // console.log("检测到点击事件", e);
        // 处理点击逻辑
      }
      this.isLongPress = false;
      uni.vibrateShort();
      this.isShowTip = false;
    },

    // 显示隐藏控件
    controlstoggle(show) {
      this.$set(this, "isShowControl", show);
    },
    // 返回上一个剧情
    async returnStory() {
      throttle(
        () => {
          let seekTime = this.seekTime || 0;
          console.log(seekTime, "returnStory---");
          if (this.isGameingFlag) {
            uni.vibrateShort({
              success: function () {
                // console.log('success');
              },
            });
          }
          this.$emit(
            "playTargetStory",
            [
              this.preStoryId,
              (flag) => {
                if (flag) {
                  this.resetState();
                  console.log("刷新位置4");
                }
              },
            ],
            seekTime
          );
        },
        this,
        3000
      );
    },
    // 跳过本章节（适用于少妇项目
    async skipSectionStory() {
      throttle(
        () => {
          this.$emit("skipSectionStory");
        },
        this,
        3000
      );
    },
    // 返回首页
    async goHome() {
      throttle(
        () => {
          this.$emit("goHome");
        },
        this,
        3000
      );
    },
    /**
     * @param {Boolean} flag 是否需要重置状态
     */
    async selsetAction(action, index) {
      if (!action.locked) {
        await this.$emit("selsetAction", action, (flag) => {
          if (flag) {
            // console.log(flag, 'selsetAction----')
            if (action.clickLocked) {
              this.actions[index].hide = true;
            }
            if (flag.isSetRate) {
              isNumber(flag.rate) &&
                this.$refs[this.storyId].playbackRate(flag.rate);
              return;
            }
            if (action.btnVoice) {
              this.playClickVoice(action.btnVoice);
            } else {
              this.playClickVoice();
            }

            // this.resetState(flag);
            // console.log("刷新位置1", action.name)
          }
        });
      }
    },
    // 跳转视频进度
    seekEvent(seekEventTime) {
      this.$refs[this.storyId].seekEvent(seekEventTime);
    },
    resetState(destory = true) {
      this.goNextStoryFlag = true;
      setTimeout(() => {
        if (destory) {
          if (this.$refs.lineDown) {
            this.$refs.lineDown[0].clearQte();
          }
          if (this.$refs.hideLineDown) {
            this.$refs.hideLineDown[0].clearQte();
          }
          if (this.$refs.oneSideLineDown) {
            this.$refs.oneSideLineDown[0].clearQte();
          }

          this.isShowControl = false;
          this.goNextStoryFlag = false;
        }
        // 500
      }, 10);
    },
  },
};
</script>


<style lang="scss">
.u-badge-dot {
  width: 36rpx;
  height: 36rpx;
}
</style>
<style lang="scss" scoped>
@import "./index.scss";

.addNumber {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  font-size: 14px;
  color: #fff;
  background-color: pink;
  opacity: 0;
}

.showAddNumber {
  animation: showNumberAni 0.3s 0.3s linear;
}

.addThread {
  animation: addTAni 0.3s linear;
  // background-color: pink;
}

@keyframes showNumberAni {
  0% {
    opacity: 0;
    top: 0rpx;
  }

  50% {
    opacity: 1;
    top: -10rpx;
  }

  100% {
    opacity: 0;
    top: -15rpx;
  }
}

@keyframes addTAni {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>